<div data-test-flash-message="true">
  <div class="columns is-mobile is-variable is-1">
    <div class="column is-narrow message-icon">
      <Icon
        @size="l"
        class="{{alertType.glyphClass}}"
        aria-hidden="true"
        @glyph={{alertType.glyph}}
        />
    </div>
    {{#if @yieldWithoutColumn}}
      {{yield}}
    {{else}}
      <div class="column">
        <div class="message-title">
          {{or @title this.alertType.text}}
          {{#if @secondIconType}}
            <Icon
              @size="l"
              class="{{secondAlertType.glyphClass}}"
              aria-hidden="true"
              @glyph={{secondAlertType.glyph}}
            />
          {{/if}}
          {{#if @progressBar}}
            <progress
              value={{progressBar.value}}
              max={{progressBar.max}}
              class="progress is-success is-medium is-inline-block"
            ></progress>
          {{/if}}
        </div>
        {{#if @message}}
          <p class="alert-banner-message-body">
            {{@message}}
          </p>
        {{/if}}
        {{#if (has-block)}}
          <p class="message-actions">
            {{yield}}
          </p>
        {{/if}}
      </div>
    {{/if}}
  </div>
</div>
